<template>
	<view>
		<view class="top  column">
			<view class="head-info row">
				<view>
					<image class="h-img " :src="info.headimgurl"></image>
				</view>
				<view v-if="openid" class="name">
					{{info.nickname}}
				</view>
				<view v-else class="name" @click="navTo(`/pages/auth/login`)">
					登录
				</view>
				<view class="row center">
					<image @click="logout"  v-if="vip" class="vip-img" src="/static/images/icon_37.png"></image>
					<image @click="logout" v-else class="vip-img " src="/static/images/icon_35.png"></image>
				</view>
			</view>
			
			<view class="center baccaa ">
				<view class="bacc ">
					<view v-if="vip" class="wza">{{info.record.name}}</view>
					<view v-else class="wza">成为VIP可无限时间免费咨询医生</view>
					<view class="kthy center">
						<text v-if="vip" @click="xianqing" > 查看详情 </text>
						<text v-else @click="navTo(`/pages/vip/info`)"> 开通会员> </text>
					</view>
				</view>
			</view>
			
			
			

		</view>

		<!-- 功能列11表 -->
		<mxg-list :chat="chat"></mxg-list>
		
		<view v-if="xian" class="select-info">
			<view class="xandui">
			<view class="info-title center">
				<view class="ptm center">该套餐所包含的项目</view>
			</view>
			<view>
				<view class="info-content">
					<view class="center info-sel" v-for="(itemt, index) in info.record.package" :key="index">
						<view class="info-y">
						</view>
						<view class="info-wz">{{itemt.title}},可用{{itemt.frequency}}次</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import api from '@/api/commonc.js'


	export default {
		data() {
			return {
				openid:'',
				xian:false,
				vip: false,
				info: {},
				chat:0,//消息数
			}
		},

		onLoad() {
			this.openid = uni.getStorageSync('openid')
			this.myInfo()
		},
		 onShow: function() {
		          this.openid = uni.getStorageSync('openid')
		          this.myInfo()
		        },

		methods: {
			//退出
			logout() {
				uni.showModal({
					title: '确定退出登录?',
					content: '退出后不会删除任何历史数据',
					success: async (res) => {
						if(res.confirm) {
								//退出成功
								this.$util.msg('成功退出登录')
								this.$store.commit('logout')
								setTimeout(() => {
									this.navBack()
								}, 300)
							
						}
					}
				})
			},
			async myInfo() {
				
				const {
					data
				} = await api.myInfo({
					openid: this.openid
				})
				
				//上线用111
				const {
					code
				} = await api.jbstate({
					
				})
				
				this.info = data
				this.chat=data.chat
				console.log(111)
				// console.log(data)
				console.log(data.chat)
				// console.log(222)
				
				if (data.record.name) {
					this.vip = true
				}
				if(code !=1){
					this.vip = true
				}
				console.log(data)
			},
			xianqing(){
				this.xian=!this.xian
			}

		}
	}
</script>

<style lang="scss">
	.top {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(0deg, #663B94 0%, #A461C5 50%, #A464C3 100%);
		justify-content: center;
		// background: red;
		.head-info {
			height: 120rpx;
			align-items: center;

			.name {
				padding-left: 30rpx;
				// width: 150rpx;
				height: 32rpx;
				padding-right: 15rpx;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				line-height: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.h-img {
				margin-left: 30rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.vip-img {
				width: 70rpx;
				height: 32rpx;
			}
		}


	}

	.baccaa {
		margin-top: 0rpx;
		height: 280rpx;
		.bacc {
			width: 690rpx;
			height: 200rpx;
			background-image: url('~@/static/images/card _2.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100%;
			display: flex;
			align-items: center;

			.wza {
				padding-left: 120rpx;
				width: 490rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #040235;
				line-height: 34rpx;
				
				overflow: hidden; // 超出隐藏
				text-overflow: ellipsis; //超出部分显示省略号
				-webkit-line-clamp: 1; //设置显示的行数
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 纵向
				white-space: normal; // 空白会被浏览器忽略

			}

			.kthy {
				width: 173rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #FFCA54 0%, #FFB133 100%);
				border-radius: 27rpx;
			}

			text {
				width: 150rpx;
				height: 24rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
			}
		}

	}
	
	
	.select-info {
		z-index: 300;
		width: 630rpx !important;
		background: #F3D7B1 !important;
		border-radius: 10rpx !important;
		position: absolute;
		
		
		top: 320rpx;
		left: 60rpx;
		right: 60rpx;
		.xandui{
			position: relative;
			
			&:after {
				position: absolute !important;
				width: 0px;
				height: 0px;
				content: " ";
				border-right: 20rpx solid transparent;
				border-top: 20rpx solid transparent;
				border-left: 20rpx solid transparent;
				border-bottom: 20rpx solid #F3D7B1;
			
				bottom: 170rpx;
				left: 550rpx;
				transform: translateX(-50%);
			}
		}
	
	
		.info-title {
	
			width: 300rpx;
			height: 60rpx;
			// background-color: #007AFF;
	
	
			margin-top: 28rpx;
			margin-left: 28rpx;
	
			background-image: url('~@/static/images/tu_8.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100%;
	
			.ptm {
	
				// background-color: #0086B3;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #F6F4F4;
	
	
			}
		}
	
	
		.info-content {
			width: 130rpx;
			// height: 26rpx;
			font-size: 26rpx;
			margin-left: 15rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #874F22;
			line-height: 30rpx;
	
	
	
			.info-y {
				width: 20rpx;
				height: 12rpx;
				background: #874F22;
				border-radius: 100%;
			}
	
			.info-sel {
				height: 35rpx;
				padding-left: 20rpx;
				width: 320rpx;
				margin-bottom: 15rpx;
	
				.info-wz {
					width: 500rpx;
					padding-left: 20rpx;
					white-space: nowrap;
				}
			}
		}
	}
</style>
